<template>
  <div class="bottom">
    <div class="card">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>联系我们 Contact us</span>
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div> -->
        <div class="text item">
          <span>
            <i class="el-icon-phone"></i>
            联系电话 / Tel：17722591344
          </span>
          <br>
          <span>
            <i class="el-icon-s-custom"></i>
            邮箱 / Email：tb@tbttop.com
          </span>
          <br>
          <span>
            <i class="el-icon-office-building"></i>
            联系地址 / Address：广东省深圳市
          </span>
        </div>
        
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>留言 Message</span>
        </div>
        <div>
          <el-form :label-position="rop" label-width="60px">
            <el-form-item label="姓名">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="留言">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button style="margin-left: 460px;" type="success">提交</el-button>
      </el-card>
      <el-card class="box-card">
        <div class="wechat">
          <div class="wechatPic">
            <img src="@/assets/WeChat.jpg" alt="">
          </div>
          <span>微信二维码</span>
          <div class="number">微信号：M9297928</div>
          <div class="number">WhatsApp：+8617722591344</div>
        </div>
        
      </el-card>
    </div> 
  </div>
</template>

<script>
export default {
  name: 'bottomIndex'
}
</script>

<style lang="less">
.bottom {
  position:relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 15px;
  bottom: 0;
  width: 100%;
  height: 320px;
  z-index: 99;
  background-color: #fff;
  .card {
    position: absolute;
    display: flex;
    top: 0;
    height: 340px;
    width: 1280px;
    left: 50%;
    transform: translateX(-50%);
    .el-card {
      display: inline-block;
      width: 620px;
      height: 320px;
      background-color: #FFF;
      border: none;
      margin-top: 15px;
      overflow: hidden;
      color: #303133;
      transition: .3s;
      &:nth-child(1){
        flex: 1;
        padding: 0 15px;
        border-right: 2px solid #EBEEF5 !important;
      }
      &:nth-child(2){
        flex: 2;
        padding: 0 15px;
        border-right: 2px solid #EBEEF5 !important;
      }
      &:nth-child(3){
        flex: 1;
        padding-left: 25px;
      }
      .el-card__header {
        padding: 18px 20px;
        border-bottom: 2px solid #EBEEF5;
        box-sizing: border-box;
        span {
            font:small-caps bold 24px arial,verdana;
        }
      }
      .el-card__body {
        padding: 20px;
        .text {
          font-size: 14px;
        }

        .item {
          margin-bottom: 18px;
          span {
            display: inline-block;
            margin-top: 25px;
          }
        }
        .wechat {
          width: 250px;
          height: 250px;
          margin: auto;
          // margin-top: 5px ;
          font-size: 14px;
          .wechatPic {
            width: 160px;
            height: 160px;
            margin: auto;
            img {
            width: 100%;
            height: 100%;
            }
          }
          span {
            display: block;
            text-align: center;
            margin-top: 8px;
          }
          .number {
            text-align: center;
            margin-top: 8px;
          }
        }
        
      }    
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }

      .box-card {
        width: 480px;
      }
    }
    .el-card.is-always-shadow {
      box-shadow: none;
    }
  }
}
</style>